import React from "react";
import { useState } from "react";
import "./Todoheader.css";
export default function Todoheader(props) {
	//props接受到的数据是只读的
	let { addTodo } = props;

	// 设置状态
	let [title, setTitle] = useState("");

	//获取输入框的值 todo
	let gettitle = (e) => {
		setTitle(e.target.value);
	};

	// 按下回车 确认数据
	let add = (e) => {
		if (e.keyCode === 13 && title.length !== 0) {
			//调用父组件 新增方法,并传递数据
			addTodo(title);
			setTitle("");
		}
	};

	return (
		<>
			<div className="todo-header">
				<input
					value={title}
					onChange={gettitle}
					onKeyUp={add}
					type="text"
					placeholder="请输入你的任务名称，按回车键确认"
				/>
			</div>
		</>
	);
}
